<template>
  <!-- 验证手机号码 -->
  <div @click.self="$store.state.isShowPhoneAlert=false" v-show="$store.state.isShowPhoneAlert" class="phone-bag">
    <transition name="bounce">
      <div v-show="$store.state.isShowPhoneAlert" class="phone-box">
        <div @click="$store.state.isShowPhoneAlert=false" class="phone-clone">x</div>
        <div class="phone-tit">欢迎预定{{$store.state.activityName}}门票</div>
        <div class="phone-yan">请先验证手机号码</div>
        <div class="phone-input-box">
          <div class="phone-input-tit">
            <img src="https://gw.alicdn.com/tfs/TB1biUcICzqK1RjSZFHXXb3CpXa-72-72.png">
            <div>+ 86 |</div>
          </div>
          <input v-model.trim="$store.state.phone" @blur="out" maxlength="20" class="phone-input" type="text" placeholder>
        </div>
        <div class="phone-input-box">
          <div style="width:2.6rem" class="phone-input-tit">
            <img src="https://gw.alicdn.com/tfs/TB1ndzGICzqK1RjSZPcXXbTepXa-72-72.png">
          </div>
          <input v-model.trim="code" @blur="out" maxlength="6" style="padding-left:2.9rem;padding-right:7rem" class="phone-input" type="text" placeholder="请输入验证码">
          <div v-if="codeTime==60" @click="getCode()" class="get-code">获取验证码</div>
          <div v-else class="get-code">{{codeTime}}s</div>
        </div>
        <div @click="subFormList()" class="submit-btn">确定</div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titName: "您的报名信息已提交！",
      codeImg: "",
      codeTime: 60, //验证码时间
      code: "" //当前要验证的验证码
    };
  },
  watch: {
    code(newValue, oldValue) {
      // 检测是否是数字
      if (isNaN(newValue)) {
        this.$Toast({
          message: `请输入正确的验证码`,
          position: "middle",
          duration: 3000
        });
        this.thisCheckCode = "";
        this.$forceUpdate();
        return;
      }
    }
  },
  methods: {
    out() {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    // 获取验证码
    getCode() {
      if (this.$store.state.phone.length < 6) {
        this.$Toast({
          message: "请输入正确的手机号码",
          position: "middle",
          duration: 3000
        });
        return;
      }
      if (!this.$store.state.phone) {
        this.$Toast({
          message: "请输入手机号码",
          position: "middle",
          duration: 3000
        });
        return;
      }
      this.codeTime--;
      let time = setInterval(() => {
        this.codeTime--;
        if (this.codeTime <= 0) {
          this.codeTime = 60;
          clearInterval(time);
        }
      }, 1000);
      this.$http
        .post("/api/isv/signUp/getVerificationCode", {
          uTel: this.$store.state.phone
        })
        .then(
          res => {
            if (res.data.success) {
              this.$Toast({
                message: "验证码发送成功",
                position: "middle",
                duration: 3000
              });
            } else {
              this.codeTime = 60;
              clearInterval(time);
              this.$Toast({
                message: res.data.errorMsg || "验证码发送失败",
                position: "middle",
                duration: 3000
              });
            }
          },
          err => {
            this.codeTime = 60;
            clearInterval(time);
            this.$Toast({
              message: "服务器出小差了",
              position: "middle",
              duration: 3000
            });
          }
        );
    },
    //提交表单数据
    async subFormList() {
      if (this.$store.state.phone.length < 6) {
        this.$Toast({
          message: "请输入正确的手机号码",
          position: "middle",
          duration: 3000
        });
        return;
      }
      if (!this.$store.state.phone) {
        this.$Toast({
          message: `请输入手机号`,
          position: "middle",
          duration: 3000
        });
        return;
      }
      if (!this.code) {
        this.$Toast({
          message: `请输入验证码`,
          position: "middle",
          duration: 3000
        });
        return;
      }
      this.$Indicator.open({
        text: "提交数据中",
        spinnerType: "fading-circle"
      });
      let subNum = this.$store.state.formList.length; //判断是否有在提交的数据
      for (let i = 0; i < this.$store.state.formList.length; i++) {
        if (!this.$store.state.formList[i].result) {
          //报名成功的数据不在提交
          let res = await this.subItemData(this.$store.state.formList[i]);
          this.$store.state.formList[i].result = res.result;
          this.$store.state.formList[i].errorMsg = res.errorMsg;
          this.$forceUpdate();
          subNum--;
        }
      }
      this.$Indicator.close();
      setTimeout(() => {
        this.$Indicator.close();
        // console.log('setTimeoutsetTimeout');
      }, 1000);

      this.$store.state.isShowPhoneAlert = false;
      // 表示没有提交数据
      if (subNum == this.$store.state.formList.length) {
        setTimeout(() => {
          this.$Indicator.close();
          console.log("setTimeoutsetTimeout");
        }, 1000);
        this.$Toast({
          message: `请确定是否有可用报名的数据`,
          position: "middle",
          duration: 3000
        });
        return;
      }
      this.subItemData();
      this.checkResult();
    },
    // 提交单个人的信息
    subItemData(formList) {
      return new Promise((resolve, reject) => {
        let subData = {
          verifiPhoneNum: this.$store.state.phone,
          verifiCodeStr: this.code,
          corpId: this.$store.state.urlParam.corpId,
          activityId: this.$store.state.urlParam.activityId,
          tempId: this.$store.state.urlParam.tempId,
          ticketTypeId: this.$store.state.urlParam.ticketTypeId,
          channelId: this.$store.state.urlParam.channelId,
          bbsId: "",
          userInfo: {}
        };
        let componenList = formList.componenList;
        for (let i = 0; i < componenList.length; i++) {
          if (componenList[i].attribute.filedCode != "bbsId") {
            subData.userInfo[componenList[i].attribute.filedCode] =
              componenList[i].attribute.filedValue || "";
          } else {
            subData.bbsId = componenList[i].attribute.filedValue || "";
          }

          //  subData.userInfo[componenList[i].attribute.filedCode] =
          //     componenList[i].attribute.filedValue || "";
        }
        let resData = {
          result: "", //状态
          errorMsg: "" //错误信息
        };

        this.$http.post("/api/isv/signUp/signUp", subData).then(
          res => {
            if (res.data.success) {
              if (res.data.result.isReview) {
                this.titName = "您的报名信息已提交！请耐心等待审核结果";
              } else {
                this.titName = "您的报名信息已提交！";
              }
              resData.result = true;
              resData.errorMsg = "";
              this.codeImg = res.data.result.openDing;
              resolve(resData);
            } else {
              resData.result = false;
              resData.errorMsg = res.data.errorMsg || "数据提交失败";
              resolve(resData);
            }
          },
          err => {
            resData.result = false;
            resData.errorMsg = "服务器出小差了";
            resolve(resData);
          }
        );
      });
    },
    // 检测提交结果是否全部提交成功
    checkResult() {
      let ifSubAll = true;
      for (let i = 0; i < this.$store.state.formList.length; i++) {
        if (!this.$store.state.formList[i].result) {
          ifSubAll = false;
          break;
        }
      }
      if (ifSubAll) {
        this.$Toast({
          iconClass: "icon icon-success",
          message: this.titName,
          // message: `您的报名信息已提交请耐心等待审核！`,
          position: "middle",
          duration: 3000
        });
        setTimeout(() => {
          this.$router.push({
            name: "suess",
            params: {
              code: this.codeImg
            }
          });
        }, 3000);
      }
    },
    // 重新提交一项
    async agenItem(index) {
      // this.$store.state.formList[index].loading = true;
      let res = await this.subItemData(this.$store.state.formList[index]);
      this.$store.state.formList[index].result = res.result;
      this.$store.state.formList[index].errorMsg = res.errorMsg;
      // this.$store.state.formList[index].loading = false;
      this.$forceUpdate();
      this.checkResult();
    }
  }
};
</script>

<style scoped>
/* 验证手机号码 */
.phone-bag {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0rem;
  top: 0rem;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  overflow-y: auto;
  z-index: 100;
  -webkit-overflow-scrolling: touch;
}
.phone-box {
  background: #fff;
  width: 88%;
  max-width: 900px;
  padding: 1rem;
  margin: 1rem 0rem;
  position: relative;
}
.phone-clone {
  position: absolute;
  right: 0rem;
  top: 0.7rem;
  font-size: 1.6rem;
  width: 3rem;
  cursor: pointer;
  color: #979797;
}
.phone-tit {
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  color: #070707;
  margin: 2.26rem 0rem 0.8rem;
}
.phone-yan {
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  color: #797979;
}
.phone-input-box {
  width: 90%;
  height: 3.8rem;
  border-bottom: 0.1rem solid #797979;
  margin: 1.46rem auto 1rem auto;
  position: relative;
}
.phone-input-tit {
  position: absolute;
  left: 0rem;
  top: 0rem;
  background: #fff;
  z-index: 2;
  width: 6rem;
  height: 100%;
  /* border: 1px solid red; */
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
}
.phone-input-tit > img {
  width: 1.7rem;
}
.phone-input-tit > div {
  width: auto;
  font-size: 1.2rem;
  color: #797979;
  margin-left: 0.36rem;
}
.phone-input {
  width: 100%;
  height: 100%;
  padding: 0rem 1rem 0rem 6.6rem;
  font-size: 1.2rem;
  color: #797979;
}
.submit-btn {
  width: 90%;
  height: 3.5rem;
  background: #ff3c83;
  line-height: 3.5rem;
  color: #ffffff;
  font-size: 1.5rem;
  margin: 4rem auto 3rem auto;
  cursor: pointer;
}
.submit-btn:active {
  background: rgba(249, 29, 112, 0.6);
}

.get-code {
  position: absolute;
  top: 25%;
  right: 0rem;
  width: 6rem;
  height: 2rem;
  line-height: 2rem;
  border: 0.1rem solid #ff3e85;
  color: #ff3e85;
  font-size: 0.9rem;
  background: #fff;
  z-index: 2;
  cursor: pointer;
}
.get-code:hover {
  background: rgba(252, 57, 130, 0.08);
}
.get-code:active {
  background: rgba(252, 57, 130, 0.08);
}
.bounce-enter-active {
  animation: bounce-in 0.4s;
}
.bounce-leave-active-class {
  animation: bounce-in 0.4s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  10% {
    transform: scale(0.2);
  }
  20% {
    transform: scale(0.3);
  }
  30% {
    transform: scale(0.4);
  }
  40% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(0.5);
  }
  60% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(0.7);
  }
  80% {
    transform: scale(0.8);
  }
  90% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/* 验证手机号码 */
</style>
